<template>
  <div class="pay-for-balance">
    <!-- 页面标题 -->
    <el-header class="header">
      <h1>确认充值</h1>
    </el-header>

    <!-- 订单信息 -->
    <div class="order-info">
      <el-descriptions title="订单信息" :column="1" border>
        <el-descriptions-item label="订单号">{{ orderInfo.orderNum }}</el-descriptions-item>
        <el-descriptions-item label="账号ID">{{ orderInfo.userId }}</el-descriptions-item>
        <el-descriptions-item label="充值金额">{{ orderInfo.amount }} 元</el-descriptions-item>
        <el-descriptions-item label="充值方式">微信支付</el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 确认充值按钮 -->
    <div class="confirm-button">
      <el-button type="primary" size="large" @click="handleConfirmPayment">确认充值</el-button>
    </div>

    <!-- 确认弹窗 -->
    <el-dialog
      v-model="confirmDialogVisible"
      title="确认支付"
      width="80%"
      :before-close="handleCancelPayment"
    >
      <p>是否确认支付 {{ orderInfo.amount }} 元？</p>
      <template #footer>
        <el-button @click="handleCancelPayment">取消</el-button>
        <el-button type="primary" @click="handlePay">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { showMsg } from '@/utils/showMsg'

export default {
  // 使用 props 接收路由参数
  props: {
    orderNum: {
      type: String,
      required: true
    },
    amount: {
      type: Number,
      required: true
    },
    userId: {
      type: Number,
      required: true
    }
  },
  data()
  {
    return {
      isPay: false, // 是否完成支付
      // 订单信息
      orderInfo: {
        orderNum: '', // 从路由参数中获取
        amount: 0 // 从路由参数中获取
      },
      // 确认弹窗是否显示
      confirmDialogVisible: false
    }
  },
  created()
  {
    // 在组件创建时，从路由参数中获取金额和订单号
    this.orderInfo.orderNum = this.$route.query.orderNum || '未提供订单号'
    this.orderInfo.amount = this.$route.query.amount || 0
    this.orderInfo.userId = this.$route.query.userId || 0
  },
  methods: {
    // 点击确认充值按钮
    handleConfirmPayment()
    {
      this.confirmDialogVisible = true
    },
    // 点击取消支付
    handleCancelPayment()
    {
      this.confirmDialogVisible = false
      this.$message.warning('用户取消支付')
    },
    // 点击确定支付
    handlePay()
    {
      this.isPay = true
      axios.post('/node/users/cz', {
        userId: this.orderInfo.userId,
        amount: this.orderInfo.amount,
        orderNum: this.orderInfo.orderNum
      })
        .then(res =>
        {
          this.$message.success(res.data.data)
          this.$router.push('/Index')
        })
        .catch(e =>
        {
          showMsg('支付结果', e, 'error')
        })
    }
  },
  // 监听页面离开
  beforeRouteLeave(to, from, next)
  {
    if (this.confirmDialogVisible && !this.isPay)
      this.$message.warning('用户取消支付')
    next()
  }
}
</script>

<style scoped>
.pay-for-balance {
  padding: 20px;
  text-align: center;
}

.header {
  margin-bottom: 20px;
}

.order-info {
  margin-bottom: 30px;
}

.confirm-button {
  margin-top: 20px;
}
</style>
